<template>
  <div class="ep-container">
    <!-- 流程 -->
    <div class="ep-process" :style="`transform: scale(${zoom / 100});`">
      <!-- 递归节点 -->
      <NodeWrap v-if="processData && processData.processNode" :node="processData.processNode" />
      <!-- 结束节点 -->
      <EndNode />
    </div>
    <!-- 缩放 -->
    <div class="ep-zoom">
      <Icon icon="subtract" class="ep-zoom-icon" color="#5a5e66" :class="zoom == 50 && 'disabled'" @click="setZoom(1)" />
      <span>{{ zoom }}%</span>
      <Icon icon="plus" class="ep-zoom-icon" color="#5a5e66" :class="zoom == 300 && 'disabled'" @click="setZoom(2)" />
    </div>
  </div>
</template>

<script setup name="FlowGraph">
import NodeWrap from "./NodeWrap.vue";
import EndNode from "./Node/EndNode.vue";
import { Icon } from "@/components/Icon";
import { ref, provide, computed } from "vue";
import { createStartNode } from "./flow";
import { copy } from "./utils/tools";
import { createValidator } from "./utils/validator";
import { KEY_VALIDATOR, KEY_PROCESS_DATA } from "./flow";
const props = defineProps({
  data: {
    // 传入的流程节点数据
    type: Object,
    default: () => {}
  }
});
// 缩放值
let zoom = ref(100);
// 创建节点验证器实例
let validator = createValidator();

const processData = computed(() => {
  // 流程数据
  if (!props.data.processNode) {
    const processNode = createStartNode();
    props.data.processNode = processNode;
  }
  return props.data;
});

provide(KEY_VALIDATOR, validator);

provide(KEY_PROCESS_DATA, processData);

/**
 * 设置缩放
 * @param type
 */
const setZoom = type => {
  if (type == 1) {
    if (zoom.value == 50) {
      return;
    }
    zoom.value -= 10;
  } else {
    if (zoom.value == 300) {
      return;
    }
    zoom.value += 10;
  }
};

const validate = () => {
  return validator.validate();
};

/**
 * 获取流程配置结果
 */
const getResult = () => {
  return copy(processData.value);
};

defineExpose({
  validate,
  getResult
});
</script>
<style lang="scss" scoped>
.ep-container {
  display: flex;
  flex: 1;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-color: #f5f5f7;
  overflow-x: auto;
  overflow-y: auto;
  padding: 16px;
}

.ep-process {
  position: relative;
  height: 100%;
}

.ep-zoom {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  width: 125px;
  left: 20px;
  top: 60px;
  z-index: 10;
}

.ep-zoom-icon {
  width: 25px;
  height: 25px;
  cursor: pointer;
  border: 1px solid #5a5e66;
}
</style>
